<template>
  <div class="container">
    <div class="top">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="操作类型">
          <el-select
            v-model="form.operate_type"
            placeholder="请选择操作类型"
            clearable
          >
            <el-option label="开机" value="1"></el-option>
            <el-option label="关机" value="2"></el-option>
            <el-option label="重启" value="3"></el-option>
            <el-option label="挂起" value="4"></el-option>
            <el-option label="恢复" value="5"></el-option>
            <el-option label="备份" value="6"></el-option>
            <el-option label="还原" value="7"></el-option>
            <el-option label="创建快照" value="8"></el-option>
            <el-option label="恢复快照" value="9"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作对象">
          <el-input
            v-model="form.operate_obj"
            placeholder="请输入操作对象名称"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="操作时间">
          <el-date-picker
            v-model="form.start_time"
            type="date"
            placeholder="请选择开始时间"
            clearable
          ></el-date-picker>
          -
          <el-date-picker
            v-model="form.end_time"
            type="date"
            placeholder="请选择结束时间"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        stripe
        highlight-current-row
        row-key="id"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        :header-cell-style="{ background: '#EBECF0' }"
        ref="table"
      >
        <el-table-column
          prop="operate_content"
          label="操作内容"
        ></el-table-column>
        <el-table-column prop="operate_obj" label="操作对象"></el-table-column>
        <el-table-column prop="operate_type" label="操作类型"></el-table-column>
        <el-table-column prop="time" label="操作时间"></el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.currentPage"
          :page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes,  prev, pager, next"
          :total="pagination.totalNum"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "assetManager",
  data() {
    return {
      form: {
        operate_obj: "",
        operate_type: "",
        time: "",
      },
      tableData: [
        // {
        //   operate_content: "开机ubuntu_test成功",
        //   operate_obj: "ubuntu_test",
        //   operate_type: "开机",
        //   time: "2020-12-21 00:59:03",
        // },
        // {
        //   operate_content: "挂起ubuntu_test失败",
        //   operate_obj: "ubuntu_test",
        //   operate_type: "挂起",
        //   time: "2020-12-21 01:04:13",
        // },
      ],
      pagination: {
        currentPage: 1,
        size: 10,
        totalNum: 0,
      },
    };
  },
  mounted() {
    this.getLogList();
  },
  watch: {},
  methods: {
    getLogList() {
      let obj = this.form;
      this.$fetch(
        `/machine/log/${this.pagination.size}/${this.pagination.currentPage}`,
        obj
      ).then((res) => {
        if (res.error == 0) {
          this.tableData = res.data.list;
          this.pagination.totalNum = res.data.page.total;
        }
      });
    },
    onSearch() {
      this.getLogList();
    },
    handleSizeChange(val) {
      this.pagination.size = val;
      this.getLogList();
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.getLogList();
    },
  },
};
</script>

<style scoped lang='scss'>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #e9eef3;
  .top {
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    padding: 10px;
    // margin-bottom: 5px;
    background-color: #fff;
    // box-shadow: 1px 1px 2px #ccc;
    font-size: 14px;
    // color: #606266;
    // border-radius: 5px;
    .el-form-item {
      margin: 5px;
    }

    .el-button {
      margin-left: 10px;
    }
  }
  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    box-shadow: 1px 1px 2px #ccc;
    .block {
      width: 100%;
      margin-top: 20px;
      overflow: hidden;
      .el-pagination {
        float: right;
      }
    }
  }
}
</style>
